<template>
  <!--骨架屏-->
  <div class="skeleton-screen">
    <template v-if="'minismallbigmax'.includes(this.size)">
      <div class="char _dot-1"></div>
      <div class="char _dot-2"></div>
      <div class="char _dot-3"></div>
    </template>
    <template v-if="'smallbigmax'.includes(this.size)">
      <div class="char _dot-4"></div>
      <div class="char _dot-5"></div>
      <div class="char _dot-6"></div>
    </template>
    <template v-if="'bigmax'.includes(this.size)">
      <div class="char _dot-7"></div>
      <div class="char _dot-8"></div>
      <div class="char _dot-9"></div>
      <div class="char _dot-10"></div>
      <div class="char _dot-11"></div>
    </template>
    <template v-if="'max'.includes(this.size)">
      <div class="char _dot-12"></div>
      <div class="char _dot-13"></div>
      <div class="char _dot-14"></div>
      <div class="char _dot-15"></div>
    </template>
  </div>
</template>

<script>
  export default {
      props:{
          size:{
              type: String,
              default: "small"
          }
      }
  }
</script>

<style scoped>
  .skeleton-screen{
    cursor: pointer;
    user-select: none;
    width:100%;
    height:100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 3px;
    /*background-color: #272b33;*/
    background-color: #222833; /*背景颜色*/
  }

  .char{
    width:calc(100% - 25px);
    height:20px;
    border-radius: 5px;
    margin: 2.5% 2%;
    /*background-image: linear-gradient(90deg, #232830 25%, #252a32 37%, #232830 63%);*/
    background-image: linear-gradient(90deg, #272b34 25%, #252933 37%, #272b34 63%);
    background-size: 400% 100%;
    background-position: 100% 50%;
    animation:skeleton-screen 1.4s ease-in-out infinite;
  }

  ._dot-1{
    width:calc(40% - 25px);
  }
  ._dot-2{
    width:calc(80% - 25px);
  }
  ._dot-5{
    width:calc(95% - 25px);
  }
  ._dot-7{
    width:calc(55% - 25px);
  }
  ._dot-8{
    width:calc(85% - 25px);
  }
  ._dot-11{
    width:calc(90% - 25px);
  }


  @keyframes skeleton-screen {
    0% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0 50%;
    }
  }
</style>
